<template>
  <view id="scanCode">
		<view class="nav-box">
			<view class="nav-box-text">
				<image src="@/static/img/home/person.png" class="person"></image>
				<view class="welcome">
					<view><text>姓名：{{ userInfo.nickName }}（取样人员）</text></view>
					<view><text>单位：{{ userInfo.dept.deptName }}</text></view>
				</view>
			</view>
		</view>
		<view class="infoList" v-if="form.project.name != ''">
			<view class="title"><text>样品试件</text></view>
			<table class="view-table">
				<tr>
					<td
						v-for="(item, index) in form.sampling.specimenPhotos"
						:key="item.id"
						class="box-nav-item" 
						@click="previewImg(1, index)"
					>
						<image :src="item.url" mode="widthFix" style="width: 100px;height: 100px;"></image>
					</td>
				</tr>
				<tr>
					<td 
						v-for="(item, index) in form.sampling.specimenPhotos"
						:key="`check${item.id}`"
						align="center"
					>
						<template v-if="item.checkImg">
							<view style="display: flex;flex-direction: column;align-items: center;">
								<image :src="item.checkImg" style="width: 100px;height: 100px;" @click="previewImg(2, index)"></image>
								<uni-tag text="验证通过" type="success" size="small" style="margin-top: 10px;" />
							</view>
						</template>
						<div class="icon-box" @click="upImg(item)" v-else>
							<uni-icons type="plusempty" size="32"></uni-icons>
						</div>
					</td>
				</tr>
			</table>
		</view>
		
		<view class="bottom-nav">
			<button 
				type="primary" 
				class="btn" 
				:disabled="!form.sampling.specimenPhotos || form.sampling.specimenPhotos.length === 0 || form.sampling.specimenPhotos.some(i=>!i.checkImg)" 
				@click="next()"
			>提交</button>
		</view>
  </view>
</template>

<script>
import { checkCode } from '@/api/sample/index'
import { decrypt } from '@/common/jsencrpty.js'
import { getSampleInfo } from '@/api/sampleCheck/index'
import urlConfig from '@/common/urlConfig.js'
	
export default {
  data() {
    return {
		projectId: '',
		userInfo: {},
		form: {
			state: 0,
			stateName: '',
			project: {
				name: ''
			},
			sampling: {
				qrCode: '',
				typeName: '',
				userPhotos: [],
				qrCodePhotos: [],
				specimenPhotos: [],
				videoFiles: []
			},
			witness: {
				userPhotos: [],
				qrCodePhotos: [],
				specimenPhotos: [],
				videoFiles: []
			},
			report: undefined
		},
    }
  },
	onLoad(params) {
		this.userInfo = uni.getStorageSync('userInfo')
		this.userInfo.nickName = decrypt(this.userInfo.nickName)
		this.projectId = uni.getStorageSync('projectInfo').id
		this.getSampleInfo(params.qrCode)
	},
	methods: {
		getSampleInfo(qrCode) {
			getSampleInfo(qrCode).then(res => {
				if (res.data) {
					this.form.state = res.data.state
					this.form.stateName = res.data.stateName
					if (res.data.project) {
						this.form.project = res.data.project
					}
					if (res.data.sampling) {
						if (res.data.sampling.specimenPhotos) {
							res.data.sampling.specimenPhotos.forEach(item=>{
								item.checkImg = ""
							})
						}
						this.form.sampling = res.data.sampling
						this.covers[0].longitude = this.form.sampling.longitude
						this.covers[0].latitude = this.form.sampling.latitude
					}
					if (res.data.witness) {
						this.form.witness = res.data.witness
						this.covers1[0].longitude = this.form.witness.longitude
						this.covers1[0].latitude = this.form.witness.latitude
					}
					if (res.data.order) {
						this.form.order = res.data.order
					}
					if (res.data.report) {
						this.form.report = res.data.report
					}
				}
				
			});
		},
		previewImg(type, index) {
			let imgsArray = []
			if (type === 1) {
				this.form.sampling.specimenPhotos.forEach(item=>{
					imgsArray.push(item.url)
				})
			} else {
				this.form.sampling.specimenPhotos.forEach(item=>{
					imgsArray.push(item.checkImg)
				})
			}
			uni.previewImage({
				current: index,
				urls: imgsArray
			})
		},
		upImg(item) {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
				  // 返回选定照片的本地文件路径列表 tempFilePaths
				  this.savePhoto(res.tempFilePaths[0], item)
				}
			});
		},
		savePhoto(path, item) {
			uni.showLoading({
				mask: true,
				title: '照片上传中...'
			})
			uni.uploadFile({
				url: urlConfig + '/file/uploadSampleFile',
				filePath: path,
				name: 'file',
				formData: {
					url: item.filePath
				},
				header:{
					"Content-Type": "multipart/form-data",
					"Authorization": 'Bearer ' + uni.getStorageSync('token')
				},
				success:(res) => {
					uni.hideLoading()
					console.log(res)
					let obj = JSON.parse(res.data)
					if (obj.code == 200) {
						item.checkImg = obj.data.url
						console.log(item)
					} else {
						uni.showToast({
							title: obj.data.msg,
							icon: 'none'
						})
					}
				},
				fail: (error) => {
					console.log(error)
					let obj = JSON.parse(res.data)
					uni.hideLoading()
					uni.showToast({
						title: obj.msg,
						icon: 'none'
					})
				}
			});
		},
		next() {
			uni.showToast({
				title: "验样成功",
				duration: 1500
			})
			uni.navigateTo({
				url: '/pages/menu/index'
			})
		}
	}
}
</script>
<style lang="scss" scoped>
	#scanCode {
		overflow: hidden;
		background-color: #fafafa;
		height: calc(100vh - 44px);
		
		.nav-box {
			width: 100vw;
			height: 160px;
			margin-top: -44px;
			padding: 56px 20px 56px 20px;
			background-image: url(../../static/img/home/head-bg.png);
			
			.nav-box-text {
				height: 50px;
				display: flex;
				align-items: center;
				
				.person {
					width: 48px;
					height: 48px;
				}
				.welcome {
					color: #333;
					font-size: 32rpx;
					margin-left: 40rpx;
				}
			}
		}
		.infoList {
			margin-top: -46px;
			.title {
				font-size: 14px;
				padding: 10px 20px;
				position: relative;
				
				&::before {
					top: 11px;
					left: 10px;
					content: '';
					width: 4px;
					height: 16px;
					position: absolute;
					border-radius: 10px;
					background-color: #2979ff;
				}
				.project-status {
					margin-left: 20px;
				}
			}
			.view-table {
				margin: 0 auto;
				.icon-box {
					width: 40px;
					height: 40px;
					display: flex;
					align-items: center;
					border-radius: 12px;
					border: 1px solid #999;
					justify-content: center;
				}
			}
		}
		.bottom-nav {
			left: 0;
			bottom: 0;
			width: 100vw;
			height: 50px;
			padding: 10px;
			position: fixed;
			background-color: #fff;
			box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
		}
	}
</style>
